<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>社区页面</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="../css/sm.min.css">
		<link rel="stylesheet" href="../css/sm-extend.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<link rel="stylesheet" href="../css/forum-addTopic.css">

		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src="../js/config.js"></script>
		<style type="text/css">
			/* 背景色白色 */
			.page,
			.page-group {
				background-color: white;
			}

			/* 去掉卡片边距 */
			.card {
				margin: 0;
				box-shadow: 0 0rem 0rem rgba(0, 0, 0, 0);
			}

			/* 头像圆角 */
			.my-photo img {
				border-radius: 0.8rem;
			}

			/* 消除社区间黑线 */
			.list-block .item-inner:after {
				content: none;
			}

			.list-block ul:before {
				background-color: white;
			}

			/* 关注社区文字调整 */
			.my-forumText {
				height: 2rem;
				line-height: 2rem;
				font-weight: 600;
				font-size: 0.6rem;
				padding-left: 0.8rem;
			}

			/* 关注社区名 */
			.my-card .item-title {
				padding-top: 0.5rem;
				font-size: 0.6rem;
			}

			/* 热门社区名 */
			#lively .item-title {
				padding-top: 0.2rem;
				font-size: 0.6rem;
			}

			/* 社区简介 社区关注量*/
			.list-block .my-user {
				padding-top: 0rem;
				font-size: 0.49rem;
				color: rgb(150, 150, 150);
			}

			/* 消除等级图标溢出隐藏 */
			.list-block .item-title {
				overflow: inherit
			}

			/* 等级图标 */
			.my-card .item-title .iconfont {
				font-size: 0.6rem;
				position: relative;
				top: -0.2rem;
			}

			.icon-level-1,
			.icon-level-2,
			.icon-level-3 {
				color: rgb(106, 210, 176);
			}

			.icon-level-4,
			.icon-level-5,
			.icon-level-6 {
				color: rgb(103, 160, 240);
			}

			.icon-level-7,
			.icon-level-8,
			.icon-level-9 {
				color: rgb(242, 179, 40);
			}

			/* 顶部搜索栏 */
			.row .button-fill {
				position: relative;
				top: 0rem;
			}

			/* .row .col-85{
				width: 79%;
			} */
			/* 关注 */
			.concern {
				width: 3.5rem;
				height: 1rem;
				line-height: 1rem;
				font-size: 0.45rem;
				text-align: center;
				color: #008ece;
				background-color: #8cd6f22e;
				border-radius: 0.4rem;
				margin-right: 1rem;
			}

			/* popup遮罩异常 */
			.modal-overlay.modal-overlay-visible,
			.popup-overlay.modal-overlay-visible,
			.preloader-indicator-overlay.modal-overlay-visible {
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<div class="searchbar row">
					<div class="search-input col-85">
						<input type="search" id='search' placeholder='输入关键字...' />
					</div>
					<a @click="find" data-popup=".popup-find" class="open-popup button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
				</div>
			</header>

			<!-- 工具栏 -->
			<nav class="bar bar-tab">
				<a class="tab-item external" href="forum-index.html">
					<!-- <span class="icon icon-home"></span> -->
					<span class="icon iconfont icon-Moneymanagement"></span>
					<span class="tab-label">动态</span>
				</a>
				<a class="tab-item external active" href="#">
					<span class="icon iconfont icon-chengshi"></span>
					<span class="tab-label">社区</span>
				</a>
				<a class="tab-item external" href="#">
					<span data-popup=".popup-addTopic" class="open-popup  icon iconfont icon-chuangzuo"></span>
					<span class="tab-label">发布</span>
				</a>
				<a class="tab-item external" href="forum-mes.html">
					<span class="icon iconfont icon-message"></span>
					<span class="tab-label">消息</span>
				</a>
				<a class="tab-item external" href="forum-user-centre.html?userId=null">
					<span class="icon iconfont icon-peoplelist"></span>
					<span class="tab-label">我的</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">

				<!-- 社区 -->
				<div class="my-forumText">
					关注社区：
				</div>
				<div class="card card-content list-block media-list my-card">
					<ul>
						<li class="item-content" v-for="item in myConcern">
							<div class="item-media my-photo">
								<a :href="htmlHref(item.forum.id)">
								<img :src="imgSrc(item.forum.photo)" width="44" height="44">
								</a>
							</div>
							<div class="item-inner">
								<div class="item-title-row">
									<div class="item-title">
										<span>{{item.forum.name}}</span>
										<span :class="ico(item.exp)"></span>
										<!-- <span class="lv">{{lv}}</span> -->
									</div>
								</div>
								<div class="item-subtitle my-user">{{item.forum.intro}}</div>
							</div>
						</li>
					</ul>

					<!-- 热门社区 -->
					<div class="my-forumText ">
						热门社区：
					</div>
					<ul id="lively">
						<li class="item-content" v-for="item in livelyForum">
							<div class="item-media my-photo">
								<a :href="htmlHref(item.forum.id)">
								<img :src="imgSrc(item.forum.photo)" width="44" height="44">
								</a>
							</div>
							<div class="item-inner">
								<div class="item-title-row">
									<div class="item-title">{{item.forum.name}}</div>
								</div>
								<div class="item-subtitle my-user">
									<span>用户：{{item.concernNum}}</span>&nbsp&nbsp
									<span>话题：{{item.topicsNum}}</span>
								</div>
							</div>
							<div class="concern" @click="concern(item.forum.id)" :value="item.forum.id" v-if="item.userConcern==0">
								关注
							</div>
							<div class="concern" @click="cancelConcern(item.forum.id)" :value="item.forum.id" v-else>
								取消关注
							</div>
						</li>
					</ul>
				</div>

			</div>

			<!-- About Popup -->
			<div class="popup  popup-find">
				<div class="content-block">

					<!-- 搜索 -->
					<div class="card card-content list-block media-list my-card">
						<div class="my-forumText ">
							搜索结果：
						</div>
						<ul id="lively">
							<li class="item-content" v-for="item in findForum">
								<div class="item-media my-photo">
									<a :href="htmlHref(item.forum.id)">
									<img :src="imgSrc(item.forum.photo)" width="44" height="44">
									</a>
								</div>
								<div class="item-inner">
									<div class="item-title-row">
										<div class="item-title">{{item.forum.name}}</div>
									</div>
									<div class="item-subtitle my-user">
										<span>用户：{{item.concernNum}}</span>&nbsp&nbsp
										<span>话题：{{item.topicsNum}}</span>
									</div>
								</div>
								<div class="concern" @click="concern(item.forum.id)" :value="item.forum.id" v-if="item.status==0">
									关注
								</div>
								<div class="concern" @click="cancelConcern(item.forum.id)" :value="item.forum.id" v-else>
									取消关注
								</div>
							</li>
						</ul>
					</div>
					<p><a href="#" class="close-popup button button-fill button-primary col-15" 
					@click="findCont=false" style="width: 3rem;">返回</a></p>
					

				</div>
			</div>
			
		</div>
		<!-- 发布消息 -->
		<div class="popup popup-addTopic">
			<div class="content-block">
				<!-- 工具栏 -->
				<div class="addTopic-top row">
					<div class="t1 col-33">
						<span class="close-popup iconfont icon-fanhui"></span>
					</div>
					<div class="t2 col-33">
						<span>我的动态</span>
					</div>
					<div @click="addTopic" class="t3 col-33">
						<span>发布</span>
					</div>
				</div>
				<!-- 输入区域 -->
				<div id="addTopic-count" class="item-content list-block">
					<textarea id="topicContent" name="topicContent" maxlength="10000" required placeholder="尽情发挥吧..."></textarea>
				</div>
				<!-- 图片 -->
				<div id="addTopic-img" class="row">
					<div v-for="(item,index) in imgs" class="userImg col-33">
						<span @click="delImg(index)" class="imgDel iconfont icon-shanchu"></span>
						<img :src="imgSrc(item)">
					</div>
					<div v-if="imgs.length<3" class="userImg col-33">
						<!--  -->
						<form id="imgForm" method="post" enctype="multipart/form-data">
							<input type="file" @change="addImgMethod" id="addImg" name="img" accept="image/jpeg" />
						</form>
						<img src="../img/iconfont-tianjia.png">
					</div>
				</div>
			</div>
		</div>
		<script>
			//绑定vue
			var app1 = new Vue({
				el: ".page",
				data: {
					myConcern: null,
					livelyForum: null,
					findForum:null,
					findCont: false
				},
				mounted() {
					axios.get(serviceIP+"/forum/communityConcern",{headers:{"token":token,"refreshtoken":refreshtoken}}).then(result => {
						this.myConcern = result.data.data;
						this.livelyForum = result.data.active;
						//console.log(result);
					});
				},
				methods: {
					imgSrc: function(src) {
						return src;
					},
					htmlHref:function(href){
						return "forum-forum.html?forumId="+href;
					},
					/* 经验对应图标等级判断 */
					ico: function(exp) {
						if (exp <= 15) {
							return "iconfont icon-level-1";
						} else if (exp <= 50) {
							return "iconfont icon-level-2";
						} else if (exp <= 100) {
							return "iconfont icon-level-3";
						} else if (exp <= 300) {
							return "iconfont icon-level-4";
						} else if (exp <= 600) {
							return "iconfont icon-level-5";
						} else if (exp <= 1200) {
							return "iconfont icon-level-6";
						} else if (exp <= 2500) {
							return "iconfont icon-level-7";
						} else if (exp <= 5000) {
							return "iconfont icon-level-8";
						} else {
							return "iconfont icon-level-9";
						}
					},
					//关注
					concern: function(forumId) {
						axios.get(serviceIP+"/forum/concerns", {
							params: {
								forumId: forumId,
								status: 1
							},
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							if (result.data == 1) {
								$.toast("关注成功");
								axios.get(serviceIP+"/forum/communityConcern",{headers:{"token":token,"refreshtoken":refreshtoken}}).then(result => {
									this.myConcern = result.data.data;
									this.livelyForum = result.data.active;
									//console.log(result);
								});
								//查询判断
								if(this.findCont){
									axios.get(serviceIP+"/forum/findForum", {
										params: {
											find: $("#search").val()
										},
										headers:{"token":token,"refreshtoken":refreshtoken}
									}).then(result => {
										this.findForum=result.data.data;
									});
								}
							} else {
								$.toast("失败，系统维护中");
							}
						});

					},
					//取消关注
					cancelConcern: function(forumId) {
						axios.get(serviceIP+"/forum/concerns", {
							params: {
								forumId: forumId,
								status: 0
							},
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							if (result.data == 0) {
								$.toast("已取消");
								axios.get(serviceIP+"/forum/communityConcern",{headers:{"token":token,"refreshtoken":refreshtoken}}).then(result => {
									this.myConcern = result.data.data;
									this.livelyForum = result.data.active;
									//console.log(result);
								});
								//查询判断
								if(this.findCont){
									axios.get(serviceIP+"/forum/findForum", {
										params: {
											find: $("#search").val()
										},
										headers:{"token":token,"refreshtoken":refreshtoken}
									}).then(result => {
										this.findForum=result.data.data;
									});
								}
							} else {
								$.toast("失败，系统维护中");
							}
						});
					},
					/* 搜索 */
					find: function() {
						//alert($("#search").val());
						this.findCont=true;
						axios.get(serviceIP+"/forum/findForum", {
							params: {
								find: $("#search").val()
							},
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.findForum=result.data.data;
						});
					}
				}
			});
		</script>
		
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src="../js/forum-addTopic.js"></script>
		<script>
			$.init();
		</script>
	</body>

</html>
